<template>
    <div class="home">
        <h1>公司用的一些echarts</h1>
        <el-card>
            <template #header>
                <span>地图热度</span>
            </template>
            <v-map1></v-map1>
        </el-card>

        <el-card>
            <template #header>
                <span>地图热度 + 标点 + 点的图标切换</span>
            </template>
            <v-map2></v-map2>
        </el-card>

        <el-card>
            <template #header>
                <span>echarts水球图</span>
            </template>
            <liquid></liquid>
        </el-card>

        <el-card>
            <template #header>
                <span>横向进度条柱状图</span>
            </template>
            <progress-bar></progress-bar>
        </el-card>
    </div>
</template>

<script>
import vMap1 from "@/components/gzMap1.vue";
import vMap2 from "@/components/gzMap2.vue";
import liquid from "@/components/echartsLiquid.vue";
import progressBar from '@/components/progressBar.vue';

export default {
    name: "Home",
    components: {
        vMap1,
        vMap2,
        liquid,
        progressBar
    },
};
</script>


    <style scoped lang="less">
@deep: ~">>>";

@{deep}.el-card {
    width: 80vw;
    margin: 0 auto 20px;
}

@{deep}.echarts-box {
    width: 100%;
    height: 444px;
}
</style>
